<template>
	<view>
		<page-head title="rich-text,富文本"></page-head>
		<view class="smart-padding-wrap">
			<!-- 第一个富文本：对象形式的节点 -->
			<view>
				<rich-text :nodes="nodeObject"></rich-text>
			</view>
			<!-- 第二个富文本：字符串形式的 HTML -->
			<view>
				<rich-text :nodes="nodeString"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 以对象形式定义富文本节点
				nodeObject: {
					attrs: {
						class: 'div-class',
						// 补全 text-align 的值，修复样式
						style: "line-height:60px;color:red;text-align:center;background-color: #f3f3f3;"
					},
					children: [
						{
							type: 'text',
							text: 'Hello&nbsp；uni-app' // &nbsp；是全角空格，也可使用 &nbsp;（半角）
						}
					]
				},
				// 以字符串形式定义富文本（HTML 片段）
				nodeString: '<div style="text-align: center;margin-top:50rpx ;"><img src="/static/logo.png" /></div>'
			}
		}
	}
</script>

<style>
	/* 可根据需要添加额外样式 */
	.div-class {
		/* 若需要覆盖 attrs 中的样式，可在这里定义 */
	}
</style>